-
-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Docs: Updated the custom elements documentation to include $host #16686
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a good start, but I think it'd be better to reference $host closer to the top of the page so it's easier to find. Its current location doesn't really make much sense, either.
| <!-- - [basically what we have today](https://svelte.dev/docs/custom-elements-api) --> | ||
|
|
||
| Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). | ||
| Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can also access the host element and do things such as dispatching events using the [\$host](https://svelte.dev/docs/svelte/$host) rune. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the custom element you can also access the host element and do things such as dispatching events using the [\$host](https://svelte.dev/docs/svelte/$host) rune.
+ Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](svelte-options). Within the Svelte component, you can access the host element via the [`$host`](https://svelte.dev/docs/svelte/$host) rune. might be a bit cleaner, removes "do things" which doesn't sound the best
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks!
Follows up on #16652
Description:
The docs for Custom Elements didn't include a reference to the $host rune which caused confusion on how to get a host element into the component code.
The PR as a line added at the bottom of 04-custom-elements.md which simply states that for dispatching custom events or accessing the host element you can use the $host rune.